<!-- 任务表单组件 -->
<script setup lang="ts">
import {
  MissionFormType,
  MissionTypeNames,
  MissionPriorityNames,
  MissionStatusNames
} from '@/api/mission/types';
import { MISSION_TYPE, MISSION_PRIORITY, MISSION_STATUS } from '@/constants';

interface Props {
  formData: MissionFormType;
  loading: boolean;
  dialogVisible: boolean;
  dialogTitle: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  'update:formData': [value: MissionFormType];
  'update:dialogVisible': [value: boolean];
  submit: [];
  cancel: [];
}>();

const missionFormRef = ref();

// 校验规则
const rules = reactive({
  missionTitle: [
    {
      required: true,
      message: '任务标题不能为空',
      trigger: 'blur'
    }
  ],
  missionType: [
    {
      required: true,
      message: '任务类型不能为空',
      trigger: 'change'
    }
  ],
  priority: [
    {
      required: true,
      message: '优先级不能为空',
      trigger: 'change'
    }
  ],
  status: [
    {
      required: true,
      message: '状态不能为空',
      trigger: 'change'
    }
  ]
});

/** 关闭弹窗 */
function closeDialog() {
  emit('update:dialogVisible', false);
  missionFormRef.value?.resetFields();
  missionFormRef.value?.clearValidate();
}

/** 更新表单数据 */
function updateFormData(key: keyof MissionFormType, value: any) {
  emit('update:formData', {
    ...props.formData,
    [key]: value
  });
}

/** 提交表单 */
function handleSubmit() {
  missionFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      emit('submit');
    }
  });
}
</script>

<template>
  <el-dialog
    :model-value="dialogVisible"
    :title="dialogTitle"
    width="800"
    append-to-body
    @update:model-value="emit('update:dialogVisible', $event)"
    @close="closeDialog"
  >
    <el-form ref="missionFormRef" :model="formData" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务标题" prop="missionTitle">
            <el-input
              :model-value="formData.missionTitle"
              placeholder="请输入任务标题"
              @update:model-value="updateFormData('missionTitle', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务类型" prop="missionType">
            <el-select
              :model-value="formData.missionType"
              placeholder="请选择任务类型"
              class="!w-full"
              @update:model-value="updateFormData('missionType', $event)"
            >
              <el-option
                v-for="(name, value) in MissionTypeNames"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-select
              :model-value="formData.priority"
              placeholder="请选择优先级"
              class="!w-full"
              @update:model-value="updateFormData('priority', $event)"
            >
              <el-option
                v-for="(name, value) in MissionPriorityNames"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select
              :model-value="formData.status"
              placeholder="请选择状态"
              class="!w-full"
              @update:model-value="updateFormData('status', $event)"
            >
              <el-option
                v-for="(name, value) in MissionStatusNames"
                :key="value"
                :label="name"
                :value="Number(value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目标版本" prop="version">
            <el-input
              :model-value="formData.version"
              placeholder="请输入目标版本"
              @update:model-value="updateFormData('version', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建人">
            <el-input
              :model-value="formData.createBy"
              placeholder="请输入创建人"
              @update:model-value="updateFormData('createBy', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="任务描述" prop="missionDescription">
            <el-input
              :model-value="formData.missionDescription"
              type="textarea"
              :rows="3"
              placeholder="请输入任务描述"
              @update:model-value="updateFormData('missionDescription', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="需求描述" prop="requirements">
            <el-input
              :model-value="formData.requirements"
              type="textarea"
              :rows="3"
              placeholder="请输入需求描述"
              @update:model-value="updateFormData('requirements', $event)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input
              :model-value="formData.remarks"
              type="textarea"
              :rows="2"
              placeholder="请输入备注"
              @update:model-value="updateFormData('remarks', $event)"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
